<template>
	<view>
		<view style="margin-top: 6px;">
		    <view class="reasons" >
		        <view style="display: flex;justify-content: space-between;" @click="show = true">
					<span style="font-size: 12px;padding-left: 10rpx;">申请原因:</span>
					<view>{{reason}}</view>
					<view class="jt">
						<uni-icons type="arrowright" color="black" size="20"></uni-icons>
					</view>
				</view>
		    </view>
		    <view class="shuoming">
				<span style="font-size: 12px;padding-left: 10rpx;">申请说明:</span>
		        <textarea type="text" @input="detail" placeholder="请填写详细申请说明" style="padding-left: 10rpx;"></textarea>
		    </view>
		    <view style="display: flex;background-color: white;padding: 10px;margin-bottom: 10px;" class="telbox">
		        <view style="font-size: 12px;flex: 2;line-height:20px;">联系方式</view>
		        <view style="flex: 6;"><input type="number" @input="dianhua" v-model="tel" placeholder="请输入电话" style="padding: 0px;margin: 0px;"></view>
		    </view>
			<view style="display: flex;background-color: white;padding: 10px;margin-bottom: 10px;" class="telbox">
			    <view style="font-size: 12px;flex: 2;line-height:20px;">退货数量</view>
			    <view style="flex: 6;"><input type="number" @input="shuliang" v-model="num" placeholder="请输入退货数量" style="padding: 0px;margin: 0px;"></view>
			</view>
		    <view class="picbox">
		        <view style="font-size: 12px;flex: 2;line-height:40px;padding-left: 10rpx;">照片凭证：(必选，最好是和客服的聊天记录，最多3张)</view>
		        <!-- <view class="pics">
		            <view class="box1">
		                <img id="addtu">
		            </view>
		        </view> -->
				<u-upload ref="uUpload" :action="action" :auto-upload="true" max-count="3"></u-upload>
		    </view>
			<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		    <view style="text-align: center; margin-top: 16px;">
		        <button type="button" @click="submit()" class="tuikuan">提交申请</button>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orId:'',			//订单ID
				odId:'',			//订单详情ID
				tel:'', 			//联系电话
				gid:'', 			//商品ID
				num:'',				//退货数量
				odNum:'',			//订单详情数量
				gzhId:'',			//公众号ID
				show: false,		//是否显示申请原因下拉列表
				reason:'请点击选择申请原因',//选中的申请原因
				reasonId:'',		//申请原因ID
				refund_describe:'', //申请说明
				refund_type:3,	    //退换货类型（退款不退货）
				list: [],			//退换货理由
				action: this.host+'/upload',//地址
				filesArr: []
			}
		},
		onLoad(opt) {
			this.orId = opt.orId;
			this.odId = opt.odId;
			this.tel = opt.tel;
			this.gid = opt.gid;
			this.gzhId = opt.gzhId;
			//判断是否是七天无理由
			this.isQitianwuliyou();
		},
		methods: {
			//提交申请
			submit() {
				console.log("提交申请")
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				files = this.$refs.uUpload.lists;
				if(this.isNull(this.reasonId)){
					this.$u.toast("请先选择申请退货原因");
					return;
				}
				if(this.isNull(this.refund_describe)){
					this.$u.toast("请先填写申请说明");
					return;
				}
				if(this.tel.length<11){
					this.$u.toast("请输入正确的联系方式");
					return;
				}
				if(this.isNull(this.num)){
					this.$u.toast("请输入退货数量");
					return;
				}
				if(this.num > this.odNum){
					this.$u.toast("退货数量超限");
					return;
				}
				if(this.reasonId==2 && files.length<1){
					this.$u.toast("请先上传商品问题图片");
					return;
				}
				let tu1 = '';
				let tu2 = '';
				let tu3 = '';
				for (let i = 0; i < files.length; i++) {
					if(i==0){
						tu1 = files[i].response.data
					}else if(i==1){
						tu2 = files[i].response.data
					}else if(i==2){
						tu3 = files[i].response.data
					}
				}
				uni.request({
					header:{'Content-Type':'application/json'},
					url:this.host+'/gzhRefund/jifenUserShengqingRefund',
					method:'POST',
					data:{
						orderId:this.orId,
						user_contact:this.tel,
						refund_type:3,
						goodsId:this.gid,
						refund_number:this.num,
						refund_reason:this.reasonId,
						refund_describe:this.refund_describe,
						userId:uni.getStorageSync('usersId'),
						picture1:tu1,
						picture2:tu2,
						picture3:tu3,
						order_detail_id:this.odId,
						gzhId:this.gzhId
					},
					success: (res) => {
						if(res.data.code==200){
							this.$u.toast("申请成功，等待商家处理")
							setTimeout(()=>{
								uni.$emit('getJifenCenter');
								uni.redirectTo({
									url:'../center'
								})
							},500)
						}else if(res.data.msg==null || res.data.msg==""){
							this.$u.toast("申请失败，请稍后再试")
						}else{
							this.$u.toast(res.data.msg)
						}
					}
				})
			},
			//判断是否是七天无理由
			isQitianwuliyou(){
				this.$http.get('/gzhRefund/getOrderDetailById',{
					odId:this.odId
				}).then(res => {
					if(res.data.code==200){
						this.odNum = res.data.data.odNum;
						if(res.data.data.qitianwuliyou==0){
							this.list = [{value: '2',label: '产品质量问题'},
										{value: '3',label: '发票问题'},
										{value: '0',label: '其他'},];
						}else{
							this.list = [{value: '2',label: '产品质量问题'},
										{value: '3',label: '发票问题'},
										{value: '0',label: '其他'},];
							// this.list = [{value: '1',label: '7天无理由退货'},
							// 			{value: '2',label: '产品质量问题'},
							// 			{value: '3',label: '发票问题'},
							// 			{value: '0',label: '其他'},];
						}
					}
				})
			},
			//得申请说明
			detail(e){
				this.refund_describe = e.target.value;
			},
			//编辑电话号码
			dianhua(e){
				this.tel = e.target.value;
			},
			//编辑退货数量
			shuliang(e){
				this.num = e.target.value;
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				this.reason = e[0].label;
				this.reasonId = e[0].value;
			},
			// 判断是否为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.tuikuan{
		width: 200rpx;
		height: 70rpx;
		font-size: 14px;
		color: white;
		line-height: 70rpx;
		background-color: #dd524d;
	}
	#showUserPicker{
		font-size: 14px;
	}
	.jt img{
		width: 16px;
		height: 16px;
	}
	.reasons,.shuoming{
		background-color: white;
		padding: 10px 0px;
		margin-bottom: 10px;
	}
	.shuoming textarea{
		height: 60px;
		width: 100%;
	}
	.shuoming textarea,.telbox input{
		border: none;
		padding: 0px;
		font-size: 14px;
	}
	.picbox{
		background-color: white;
	}
	.pics{
		display: flex;
		justify-content: center;
	}
	.pics>view{
		width: 125px;
		margin-right: 10px;
		position: relative;
		background: url("../../../static/center/picup.png") no-repeat center;
		background-size: 50px 50px;
	}
	.pics img{
		width: 100%;
		height: 120px;
	}
</style>
